<template>
    <div class="app">
        <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="1-1">内容推送</el-menu-item>
            <el-menu-item index="1-2">用户管理</el-menu-item>
        </el-submenu>
        <el-button type="text" class="logout" @click="logout">注销</el-button>
        </el-menu>
        <div class="main" v-if="choice=='1-1'">
            <div class="title">
                <span>优质文章推送</span>
            </div>
            <span style="position: relative;margin-left:46%;">已推送数量:{{total}}/6</span>
            <div class="form">
                 <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="CreateTime"
                    label="日期"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="BlogTitle"
                    label="文章标题">
                </el-table-column>
                <el-table-column
                    prop="BlogView"
                    label="阅读数量">
                </el-table-column>
                 <el-table-column
                    prop="BlogId"
                    label="推送" >
                    <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">推送</el-button>
                    </template>
                </el-table-column>
                </el-table>
            </div>
        </div>     
        <div class="main" v-if="choice=='1-2'">
            <div class="title">
                <span>用户封禁</span>
            </div>
              <div class="form">
                 <el-table
                :data="UserPool"
                style="width: 100%">
                <el-table-column
                    prop="IconUrl"
                    label="用户头像"
                    width="180">
                    <template slot-scope="scope">
                        <img :src="scope.row.IconUrl" class="user-logo"/>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="Username"
                    label="用户名">
                </el-table-column>
                <el-table-column
                    prop="User_locked"
                    label="用户状态">
                </el-table-column>
                 <el-table-column
                    prop="BlogId"
                    label="封禁管理" >
                    <template slot-scope="scope">
                      <div v-if="scope.row.User_locked==1">
                        <el-button @click="Ban(scope.row.Uuid,scope.row.User_locked)" type="text" size="small">封禁</el-button>
                      </div>
                      <div v-else-if="scope.row.User_locked==0">
                        <el-button @click="Ban(scope.row.Uuid,scope.row.User_locked)" type="text" size="small">解封</el-button>
                      </div>
                    </template>
                </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
import {apiurl} from "../../service/api.js";

export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        choice : '',
        blogpool :[],   //文章列表
        total : 0,   //总推数量
        tableData: [],
        
        UserPool : [], //用户数据数组
      };
    },
    methods: {
      handleSelect(key, keyPath) {      
        this.choice = key
        if(key=='1-1'){
          var that = this
          that.$axios.get({
            url : apiurl.adminsearchblog
          }).then(res=>{
            if(res.data.code==200){
              for(var i=0;i<res.data.data.length;i++){
                that.tableData.push(res.data.data[i])
              }
            }
          })
        }else if(key=='1-2'){
          var that = this
          that.$axios.get({
            url : apiurl.adminManagingUsers
          }).then(res=>{
            if(res.data.code==200){
              for(var i=0;i<res.data.data.length;i++){
                that.UserPool.push(res.data.data[i])
              }
            }
          })
        }
      },
      handleClick(id){
          if(this.total<6){
            this.total+=1
            var that = this 
            that.$axios.post({
              url : apiurl.adminsearchblog,
              data : {
                BlogId : id.BlogId
              }
            }).then(res=>{
              if(res.data.code==200){
                alert("文章推送成功!")
              }
            })
          }else{
              alert("已经推送满了!!!")
          }          
      },
      Ban(Uuid,lock){
        var that = this
        if(lock==1){
             that.$axios.post({
            url : apiurl.adminManagingUsers,
            data : {
              uuid : Uuid,
              locked : 0
            }
          }).then(res=>{
            if(res.data.code==200){
               alert('封禁成功')
               that.UserPool.splice(0,that.UserPool.length)
               that.$axios.get({
               url : apiurl.adminManagingUsers
              }).then(res=>{
                if(res.data.code==200){
                  for(var i=0;i<res.data.data.length;i++){
                    that.UserPool.push(res.data.data[i])
                  }
                }
              })
            }
          })
        }else if(lock==0){
           that.$axios.post({
            url : apiurl.adminManagingUsers,
            data : {
              uuid : Uuid,
              locked : 1,
            }
          }).then(res=>{
            if(res.data.code==200){
               alert('解封成功')
               that.UserPool.splice(0,that.UserPool.length)
               that.$axios.get({
               url : apiurl.adminManagingUsers
              }).then(res=>{
                if(res.data.code==200){
                  for(var i=0;i<res.data.data.length;i++){
                    that.UserPool.push(res.data.data[i])
                  }
                }
              })
            }
          })
        }
      },
      setCookie(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays*24*60*60*1000));
      var expires = "expires="+d.toUTCString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
      },
      logout(){
         var that =this
      that.$axios.get({
        url:apiurl.delToken,
      }).then(res=>{
        this.setCookie("uuid", "", -1);
        this.$router.push('/')
        location.reload() 
      })
      }
    }  
}
</script>

<style scoped>
   .main{
       width: 80%;
       height: 800px;
       margin:0 auto;
       background: rgba(245, 239, 239, 0.938)
   }
   .title{
       position: relative;
       margin-left: 45%;
       padding-top: 10px;
       font-weight: bold;  
       font-family: Arial, Helvetica, sans-serif;
       font-size: 25px;
       color: cadetblue
   }
   .form{
       position: relative;
       margin: 50px auto;
       width: 80%;
       height: 600px;
       overflow: scroll;
       overflow-x:hidden;
   }
   ::-webkit-scrollbar-track-piece{ 
    background-color:#f8f8f8;
    }
    ::-webkit-scrollbar {
    width:5px;
    height:3px;
    }
    ::-webkit-scrollbar-thumb {
    background-color:gray;
    background-clip:padding-box;
    min-height:28px;
    }
    ::-webkit-scrollbar-thumb:hover {
    background-color:#bbb;
    }
     .user-logo {
    
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f8f8f8;
    display: inline-block;
  }
  .logout{
    position: relative;
    margin-top: 10px;
    font-weight: bold;
    margin-left: 85%
  }

  
 
</style>